{% extends "base.html" %}
{% load static %}
{% block title %}用户资料 - 数据加密平台{% endblock %}

{% block content %}
<style>
    body {
        background: linear-gradient(to right, #f8f9fa, #e9ecef);
    }

    .card {
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        border: none;
    }



</style>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8 col-xl-7">
            <div class="card shadow-sm mb-4">
                <div class="card-body text-center">
                    <img src="https://picsum.photos/200/200" alt="用户头像"
                         class="rounded-circle dashboard-avatar mb-3 shadow-sm">
                    <h4>{{ user.username }}</h4>
                    <p class="text-muted">{{ user.get_role_display }} · {{ user.email }}</p>
                    <hr class="my-4">

                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span>注册日期：</span>
                        <strong>{{ user.date_joined|date:"Y-m-d" }}</strong>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span>手机号码：</span>
                        <strong>{{ user.phone|default:"未设置" }}</strong>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span>账户状态：</span>
                        {% if user.is_active %}
                        <span class="badge bg-success">活跃</span>
                        {% else %}
                        <span class="badge bg-danger">禁用</span>
                        {% endif %}
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span>公钥：</span>
                        <code class="text-break">{{ public_key|default:"未设置" }}</code>
                    </div>


                    <div class="d-grid gap-2 mt-4">
                        <a href="{% url 'user_edit' %}" class="btn btn-primary">编辑资料</a>
                    </div>
                </div>
            </div>

            <!-- 加密历史 -->
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">🔒 最近加密记录</h5>
                </div>
                <div class="card-body">
                    {% if encryption_records %}
                    <ul class="list-group list-group-flush">
                        {% for record in encryption_records %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <div>{{ record.data_hash|truncatechars:20 }}</div>
                                <small class="text-muted">{{ record.created_at|date:"Y-m-d H:i" }}</small>
                            </div>
                            <a href="{% url 'encryption_detail' record.id %}" class="btn btn-sm btn-outline-primary">
                                查看详情
                            </a>
                        </li>

                        {% endfor %}
                    </ul>
                    {% else %}
                    <p class="text-muted text-center my-3">暂无加密记录</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
